<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
    :destroyOnClose="true"
    :width="800"
    :headerStyle="{ position: 'fixed', top: 0, width: '100%', background: '#fff', zIndex: 2 }"
    :body-style="{ paddingBottom: '80px' }"
  >
    <a-form @submit="handleSubmit" :form="form" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 15 }, sm: { span: 17 } }" style="padding-top: 60px">
      <a-form-item label="名称" v-if="settingType != 1">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称！' }] }]" name="name" placeholder="请输入" autocomplete="off" :maxLength="8" />
        <span v-if="settingType == 0">不建议修改风格，会造成该场合要盒数统计不准确，若有新的风格建议新增</span>
        <span v-else>不建议修改场合，会造成该场合要盒数统计不准确，若有新的场合建议新增</span>
      </a-form-item>

      <a-form-item label="名称" v-if="settingType == 1">
        <a-select
          v-decorator="['name', { rules: [{ required: true, message: '请选择！' }] }]"
          placeholder="请选择"
          :getPopupContainer="triggerNode => triggerNode.parentNode"
          show-search
          :filter-option="filterOption"
        >
          <a-select-option v-for="(item, index) in queryData.scategorys" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
        </a-select>
        <span>不建议修改风格，会造成该场合要盒数统计不准确，若有新的风格建议新增</span>
      </a-form-item>
      <a-form-item label="图片" required v-if="settingType != 2">
        <JImageUpload :uploadParams="uploadParams" :isMultiple="false" :accept="'image/*'" @fileChange="fileChange" v-model="cardImg"></JImageUpload>
        <div class="tip" v-show="tips.cardImg">请上传图片！</div>
      </a-form-item>
      <a-form-item label="适用搭配类型" v-if="settingType != 2">
        <a-radio-group name="radioGroup" v-decorator="['gender', { rules: [{ required: true }], initialValue: 0 }]">
          <a-radio :value="0">女装</a-radio>
          <a-radio :value="1">男装</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="启用状态">
        <a-radio-group name="isactive" v-decorator="['isactive', { rules: [{ required: true }], initialValue: 1 }]">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
        <a-button type="primary" htmlType="submit">确定</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { attrCreateOrUpdateValue } from '@/api/box/setting'
import pick from 'lodash.pick'
export default {
  props: ['uploadParams', 'queryData'],
  components: { JImageUpload },
  data() {
    return {
      baseId: '',
      title: '',
      visible: false,
      settingType: '',
      form: this.$form.createForm(this),
      imgObj: {
        cardImg: []
      },
      tips: {
        cardImg: false
      },
      cardImg: []
    }
  },

  computed: {},
  mounted() {},
  methods: {
    // 弹框
    showModal(item, type) {
      this.baseId = item.id
      if (item != 'add') {
        this.title = '编辑'
        this.echo(item, type)
      } else {
        this.title = '新增'
        this.cardImg = []
      }
      this.settingType = type
      this.visible = true
    },
    // 回显
    echo(item, type) {
      let self = this
      let info = JSON.parse(JSON.stringify(item))
      info.isactive = info.isactive == 'Y' ? 1 : 0
      info.gender = info.gender == '男装' ? 1 : 0
      this.cardImg = item.img ? [item.img] : ''
      if (type == 2) {
        setTimeout(() => {
          self.form.setFieldsValue(pick(info, 'name', 'isactive'))
        }, 0)
      } else {
        setTimeout(() => {
          self.form.setFieldsValue(pick(info, 'name', 'gender', 'isactive'))
        }, 0)
      }
    },
    // 上传图片
    fileChange(list) {
      this.imgObj.cardImg = list
      this.tips.cardImg = false
    },
    // 保存
    handleSubmit(e) {
      e.preventDefault()
      if (this.imgObj.cardImg && this.imgObj.cardImg.length > 0) {
        this.tips.cardImg = false
      } else {
        this.tips.cardImg = true
      }
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {
            requestData: {
              img: this.imgObj.cardImg && this.imgObj.cardImg.length > 0 ? this.imgObj.cardImg[0].url : '',
              isactive: values.isactive == 1 ? 'Y' : 'N',
              gender: values.gender,
              name: values.name,
              attrId: this.settingType == 0 ? '10' : this.settingType == 1 ? '11' : '5',
              description: this.settingType == 0 ? '风格管理' : this.settingType == 1 ? '期望单品管理' : '场景标签'
            }
          }
          if (this.settingType == 1) {
            params.requestData.name = this.queryData.scategorys
              .filter(e => values.name == e.id)
              .map(i => i.attribname)
              .join(',')
          }
          if (this.baseId) params.requestData.id = this.baseId
          if (this.settingType == 2) {
            delete params.requestData.img
            delete params.requestData.gender
          }

          attrCreateOrUpdateValue(params).then(res => {
            if (res.code == 0) {
              this.$message.warning('保存成功')

              this.onClose()
              this.$emit('editOk')
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    },
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 取消
    onClose() {
      this.cardImg = []
      this.imgObj.cardImg = []
      this.form.resetFields()
      this.visible = false
      this.tips.cardImg = false
    }
  }
}
</script>

<style lang="less" scoped>
.tip {
  color: #f5222d;
  line-height: 22px;
  margin-top: -8px;
}
</style>
